<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<section th:if="${#lists.isEmpty(dataMap)}" class="no-data__wrap">
    <span class="no-data-ico"></span>
    <p class="mt20"><span class="c-666">没有要学习的课程哦~~~</span></p>
</section>

<div class="s-record-wrap" th:if="!${#lists.isEmpty(dataMap)}" th:each="catalog :${dataMap}">
    <aside class="pr s-r-year_wrap" th:if="!${#strings.isEmpty(catalog['timeAxis'])}" >
        <div class="s-r-year">
            <strong class="c-fff fs18" th:text="${catalog['timeAxis']}">今天</strong>
            <em class="s-r-year_icon">&nbsp;</em>
        </div>
    </aside>
    <article class="s-record">
        <span class="s-r-sj">&nbsp;</span>
        <aside class="s-r-c-time">
                    <span class="c-info fs16 mr20" th:text="${catalog['lessonTimeFormat']}">
                        12.27
                        14:45
                    </span>
            <em class="s-r-c-t">&nbsp;</em>
        </aside>
        <div class="media">
            <div class="media-body">
                <div class="row">
                    <div class="col-sm-9">
                        <section class="hLh30 txtOf">
                            <span class="fs14 c-999 vam"  th:text="${catalog['courseTypeKey']}=='LIVE'?'[直播课]':'[小班课]'">「直播课」：</span>
                            <span class="fs14 c-999 vam" th:text="${catalog['courseName']}">P2P网络</span>
                        </section>
                        <section class="fs14 hLh20 txtOf mt5">
                            <span class="c-danger vam" th:if="${catalog['livePlayState']}==3 and ${catalog['replay']} !=1">「已结束」</span>
                            <span class="c-danger vam" th:if="${catalog['livePlayState']}==1">「正在直播」</span>
                            <span class="c-danger vam" th:if="${catalog['livePlayState']}==4">「提前进入」</span>
                            <span class="c-danger vam" th:if="${catalog['livePlayState']}==2">「未开始」</span>
                            <span class="c-333 vam" th:text="${catalog['parentName']}">第一章节：有者该如何应对</span>
                            <span class="ml10 c-333 vam">-</span>
                            <span class="ml10 c-333 vam" th:text="${catalog['catalogName']}">第三节：作为一个 P2P 资产持有者该如何应对</span>
                        </section>
                    </div>
                    <div class="col-sm-3 text-right">
                        <a href="javascript:void(0)" th:if="${catalog['livePlayState']}==1"><button type="button" th:data-id="${catalog['courseId']}" th:data-catalogid="${catalog['id']}" class="btn btn-outline btn-danger btn-rounded mt10 checkPlay"><span>进入直播</span></button></a>
                        <a href="javascript:void(0)" th:if="${catalog['livePlayState']}==4"><button type="button" th:data-id="${catalog['courseId']}" th:data-catalogid="${catalog['id']}" class="btn btn-outline btn-danger btn-rounded mt10 checkPlay"><span>提前进入</span></button></a>
                        <a href="javascript:void(0)" th:if="${catalog['livePlayState']}==2"> <button type="button" disabled="disabled" class="btn btn-warning btn-rounded mt10"><span>未开始</span></button></a>
                        <a th:href="@{/web/uc/play/toPlayCourse?packageId=0&courseId={courseId}&catalogId={catalogId}&type=LOBBY(courseId=${catalog['courseId']},catalogId=${catalog['id']})}" th:if="${catalog['livePlayState']}==3 and ${catalog['replay']}==1"><button type="button" class="btn btn-outline btn-info btn-rounded mt10"><span>直播回放</span></button></a>
                        <a href="javascript:void(0)" th:if="${catalog['livePlayState']}==3 and ${catalog['replay']} !=1"><button type="button" disabled="disabled" class="btn btn-default btn-rounded mt10"><span>已结束</span></button></a>
                    </div>
                </div>

            </div>
        </div>
    </article>
</div>

<!--<div class="s-record-wrap">-->
<!--<article class="s-record">-->
<!--<span class="s-r-sj">&nbsp;</span>-->
<!--<aside class="s-r-c-time">-->
<!--<span class="c-info fs16 mr20">-->
<!--12.27-->
<!--14:45-->
<!--</span>-->
<!--<em class="s-r-c-t">&nbsp;</em>-->
<!--</aside>-->
<!--<div class="media">-->
<!--<div class="media-body">-->
<!--<div class="row">-->
<!--<div class="col-sm-9">-->
<!--<section class="hLh20 txtOf">-->
<!--<span class="fs14 c-999 vam">「小班课」：</span>-->
<!--<span class="fs14 c-666 vam">P2P网络</span>-->
<!--</section>-->
<!--<section class="fs14 hLh20 txtOf mt5">-->
<!--<span class="c-666 vam">「未开始」</span>-->
<!--<span class="c-333 vam">第一章节：有者该如何应对</span>-->
<!--<span class="ml10 c-333 vam">第三节：作为一个 P2P 资产持有者该如何应对</span>-->
<!--</section>-->
<!--</div>-->
<!--<div class="col-sm-3 text-right">-->
<!--<a href="">-->
<!--<button type="button" disabled="disabled" class="btn btn-warning btn-rounded mt10">-->
<!--<span>未开始</span>-->
<!--</button>-->
<!--</a>-->
<!--</div>-->
<!--</div>-->

<!--</div>-->
<!--</div>-->
<!--</article>-->
<!--</div>-->

<!--<div class="s-record-wrap">-->
<!--<article class="s-record">-->
<!--<span class="s-r-sj">&nbsp;</span>-->
<!--<aside class="s-r-c-time">-->
<!--<span class="c-info fs16 mr20">-->
<!--12.27-->
<!--14:45-->
<!--</span>-->
<!--<em class="s-r-c-t">&nbsp;</em>-->
<!--</aside>-->
<!--<div class="media">-->
<!--<div class="media-body">-->
<!--<div class="row">-->
<!--<div class="col-sm-9">-->
<!--<section class="hLh20 txtOf">-->
<!--<span class="fs14 c-999 vam">「小班课」：</span>-->
<!--<span class="fs14 c-666 vam">P2P网络</span>-->
<!--</section>-->
<!--<section class="fs14 hLh20 txtOf mt5">-->
<!--<span class="c-666 vam">「已结束」</span>-->
<!--<span class="c-333 vam">第一章节：有者该如何应对</span>-->
<!--<span class="ml10 c-333 vam">第三节：作为一个 P2P 资产持有者该如何应对</span>-->
<!--</section>-->
<!--</div>-->
<!--<div class="col-sm-3 text-right">-->
<!--<a href="">-->
<!--<button type="button" disabled="disabled" class="btn btn-default btn-rounded mt10">-->
<!--<span>已结束</span>-->
<!--</button>-->
<!--</a>-->
<!--</div>-->
<!--</div>-->

<!--</div>-->
<!--</div>-->
<!--</article>-->
<!--</div>-->

<!--<div class="s-record-wrap">-->
<!--<article class="s-record">-->
<!--<span class="s-r-sj">&nbsp;</span>-->
<!--<aside class="s-r-c-time">-->
<!--<span class="c-info fs16 mr20">-->
<!--12.27-->
<!--14:45-->
<!--</span>-->
<!--<em class="s-r-c-t">&nbsp;</em>-->
<!--</aside>-->
<!--<div class="media">-->
<!--<div class="media-body">-->
<!--<div class="row">-->
<!--<div class="col-sm-9">-->
<!--<section class="hLh20 txtOf">-->
<!--<span class="fs14 c-999 vam">「小班课」：</span>-->
<!--<span class="fs14 c-666 vam">P2P网络</span>-->
<!--</section>-->
<!--<section class="fs14 hLh20 txtOf mt5">-->
<!--<span class="c-666 vam">「看回放」</span>-->
<!--<span class="c-333 vam">第一章节：有者该如何应对</span>-->
<!--<span class="ml10 c-333 vam">第三节：作为一个 P2P 资产持有者该如何应对</span>-->
<!--</section>-->
<!--</div>-->
<!--<div class="col-sm-3 text-right">-->
<!--<a href="">-->
<!--<button type="button" class="btn btn-outline btn-info btn-rounded mt10">-->
<!--<span>直播回放</span>-->
<!--</button>-->
<!--</a>-->
<!--</div>-->
<!--</div>-->

<!--</div>-->
<!--</div>-->
<!--</article>-->
<!--</div>-->

<!--<div class="s-record-wrap">-->
<!--<article class="s-record">-->
<!--<span class="s-r-sj">&nbsp;</span>-->
<!--<aside class="s-r-c-time">-->
<!--<span class="c-info fs16 mr20">-->
<!--12.27-->
<!--14:45-->
<!--</span>-->
<!--<em class="s-r-c-t">&nbsp;</em>-->
<!--</aside>-->
<!--<div class="media">-->
<!--<div class="media-body">-->
<!--<div class="row">-->
<!--<div class="col-sm-9">-->
<!--<section class="hLh20 txtOf">-->
<!--<span class="fs14 c-999 vam">「小班课」：</span>-->
<!--<span class="fs14 c-666 vam">P2P网络</span>-->
<!--</section>-->
<!--<section class="fs14 hLh20 txtOf mt5">-->
<!--<span class="c-666 vam">「已结束」</span>-->
<!--<span class="c-333 vam">第一章节：有者该如何应对</span>-->
<!--<span class="ml10 c-333 vam">第三节：作为一个 P2P 资产持有者该如何应对</span>-->
<!--</section>-->
<!--</div>-->
<!--<div class="col-sm-3 text-right">-->
<!--<button type="button" disabled="disabled"-->
<!--class="btn btn-outline btn-info btn-rounded mt10">-->
<!--<span>回放生成中...</span>-->
<!--</button>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</article>-->
<!--</div>-->

</html>